<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

    <style>
    body {
    background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
    }
    #login_box {
    width: 20%;
    height: 400px;
    background-color: #00000060;
    margin: auto;
    margin-top: 10%;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
    }

    h2 {
    color: #ffffff90;
    margin: 55px 0px 45px 0px;
    }

    #input-box {
    margin-top: 5%;
    }

    span {
    color: #fff;
    }

    input {
    border: 0;
    width: 60%;
    font-size: 15px;
    color: #fff;
    background: transparent;
    border-bottom: 2px solid #fff;
    padding: 5px 10px;
    outline: none;
    margin-top: 10px;
    }

    button {
    margin-top: 50px;
    width: 60%;
    height: 30px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    background-image: linear-gradient(to right, #30cfd0, #330867);
    }

    #sign_up {
    margin-top: 45%;
    margin-left: 60%;
    }
    a {
    color: #b94648;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="login-wrap">
    <div id="login_box">
        <h2>思云课堂后台业务管理系统</h2>
        <div id="input_box">
            <input type="text" placeholder="请输入用户名" v-model="user">
        </div>
        <div class="input_box">
            <input type="password" placeholder="请输入密码" v-model="password">
        </div>
        <button @click="as()">登录</button><br>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#login-wrap',
        data: {
            user:"",
            password:""
        },
        methods: {
            as(){
                var params = new URLSearchParams();
                params.append('password', this.password);
                params.append('account', this.user);
                axios({
                    method: 'post',
                    url:"http://localhost:8081/user/password",
                    data:params,

                }).then((res)=>{
                    if(res.data==200){
                       sessionStorage.setItem("user",this.user);
                        this.$message({
                            message: '登录成功',
                            type: 'success',
                            duration:2000,
                            onClose:function () {
                                window.location.href = "index.html";
                            }
                        });
                    }else if(res.data==300){
                        this.$message({
                            showClose: true,
                            duration:1000,
                            message: '用户不存在！！!',
                            type: 'warning'
                        });
                    }if(res.data==400){
                        this.$message({
                            showClose: true,
                            duration:1000,
                            message: '密码错误！！',
                            type: 'warning'
                        });
                    }
                });
            }
        }
    })
</script>
</body>
</html>